<template>
  <!-- 数据统计页面 -->
  <div class="app-container home">
    <el-row :gutter="20" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :sm="24" :lg="24">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>数据统计</span>
          </div>
          <div class="body">
            <PanelGroup></PanelGroup>
          </div>
        </el-card>
       
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>商家账号统计</span>
          </div>
          <div class="body">
            <el-table
              :data="suppler"
              height="300"
              style="width: 100%">
              <el-table-column
                prop="nick_name"
                label="商家名称"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="账号数量"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>商家出号统计</span>
          </div>
          <div class="body">
            <el-table
              :data="subOrderList"
              height="300px"
              style="width: 100%">
              <el-table-column
                prop="supplyChannel"
                label="商家名称"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="出号数量"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>销售卖号统计</span>
          </div>
          <div class="body">
            <el-table
              :data="sellOrderList"
              height="300"
              style="width: 100%">
              <el-table-column
                prop="saleChannel"
                label="销售人"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="数量"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>游戏统计</span>
          </div>
          <div class="body">
            <el-table
              :data="games"
              height="350px"
              style="width: 100%">
              <el-table-column
                prop="type"
                label="游戏类型"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="账号数量"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>当前任务</span>
          </div>
          <div class="body">
            <el-table
              :data="jobs"
              height="350"
              style="width: 100%">
              <el-table-column
                prop="type"
                label="任务类型"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="数量"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>违规统计</span>
          </div>
          <div class="body">
            <div class="timer" style="margin-bottom:12px">
              <el-date-picker
                v-model="weiguiTimer"
                type="daterange"
                value-format="yyyy-MM-dd"
                style="width:220px"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <el-select v-model="selectReason" placeholder="请选择" clearable style="width:150px">
                <el-option
                v-for="(item, i) in reasonList"
                :key="i"
                :label="item.reason"
                :value="item.id">
                </el-option>
              </el-select>
              <el-button type="primary" @click="getViolationRecord">搜索</el-button>

            </div>
            <el-table
              :data="weiguiList"
              height="300"
              style="width: 100%">
              <el-table-column
                prop="deductionUserName"
                label="商户名称"
                >
              </el-table-column>
              <el-table-column
                prop="cot"
                label="违规次数"
               >
               <template slot-scope="scope">
                <div class="link" @click="viewWeiguiDetail(scope.row.deductionUserId)">
                  {{scope.row.cot}}
                </div>
               </template>
              </el-table-column>
              <el-table-column
                prop="deductionAmount"
                label="扣款金额"
               >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="违规详情"
      :visible.sync="dialogVisible"
      width="800px">
      <div>
        <el-table :data="weiguiDetailList"
              height="calc(100vh - 380px)" style="width: 100%">
          <el-table-column label="时间" prop="createTime"  />
          <el-table-column label="用户名称" prop="deductionUserName"  />
          <el-table-column label="用户类型" prop="affiliated"  >
            <template slot-scope="scope">
              <span>{{ commonMaps.weigui[scope.row.affiliated]?commonMaps.weigui[scope.row.affiliated].label:'无' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品编号" prop="goodsId"  />
          <el-table-column label="违规原因" prop="reason"  />
        </el-table>
        <div class="pages-box">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PanelGroup from "./dashboard2/PanelGroup.vue";
import homeApi from "@/api/home/index"
import {violationRecordList,violationRulesList} from "@/api/weigui/index"
export default {
  name: "statistics",
  components:{
    PanelGroup
  },
  data() {
    return {
      suppler:[],//商家账号数量
      sellOrderList:[],//销售卖号
      subOrderList:[],//商家出号
      games:[],
      jobs:[],
      weiguiTimer:[],
      weiguiList:[],
      dialogVisible:false,//违规详情弹窗
      weiguiDetailList:[],
      pageNum:1,
      pageSize:10,
      total:0,
      reasonList:[],
      selectReason:''
    };
  },
  created(){
    this.userGameCount()
    this.sellOrder()
    this.subOrder()
    this.GameTypeCount()
    this.taskCount()
    this.getViolationRecord()
    this.getViolationRulesList()
  },
  methods: {
    // 获取违规类型列表
    getViolationRulesList() {
      violationRulesList({
        isPage: 2,
      }).then((res) => {
        this.reasonList = res.rows;
      });
    },
    // 查询违规统计
    getViolationRecord(){
      let obj = {
        violationRulesId:this.selectReason
      }
      if(this.weiguiTimer&&this.weiguiTimer.length==2){
        obj.createTimeStart = this.weiguiTimer[0]+ ' 00:00:00'
        obj.createTimeEnd = this.weiguiTimer[1]+ ' 23:59:59'
      }else{
        obj.createTimeStart = ''
        obj.createTimeEnd = ''
      }
      homeApi.getViolationRecord(obj).then(res=>{
          this.weiguiList = res.data
      })
    },
    // 查看违规详情
    viewWeiguiDetail(deductionUserId){
      this.dialogVisible = true
      this.getWeiguiDetailList(deductionUserId)
    },
    // 违规详情
    getWeiguiDetailList(deductionUserId){
      let obj = {
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        deductionUserId:deductionUserId,
        violationRulesId:this.selectReason
      }
      if(this.weiguiTimer&&this.weiguiTimer.length==2){
        obj.createTimeStart = this.weiguiTimer[0]+ ' 00:00:00'
        obj.createTimeEnd = this.weiguiTimer[1]+ ' 23:59:59'
      }else{
        obj.createTimeStart = ''
        obj.createTimeEnd = ''
      }
      violationRecordList(obj)
          .then(response => {
            this.loading = false;
            this.weiguiDetailList =response.rows;
            this.total = response.total
          })
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getWeiguiDetailList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getWeiguiDetailList();
    },
    // 商家账号数量
    userGameCount(){
     homeApi.userGameCount().then(res=>{
        this.suppler = res.data
     })
   },
   // 销售卖号统计
   sellOrder(){
     homeApi.sellOrder().then(res=>{
      console.log("%c Line:173 🍫 res", "color:#33a5ff", res);
        // this.notices = res.rows.splice(0,4)
        this.sellOrderList = res.data
     })
   },
   // 供货商出号
   subOrder(){
     homeApi.subOrder().then(res=>{
      console.log("%c Line:173 🍫 res", "color:#33a5ff", res);
        // this.notices = res.rows.splice(0,4)
        this.subOrderList = res.data
     })
   },
  //  GameTypeCount  游戏类型统计
  GameTypeCount(){
     homeApi.GameTypeCount().then(res=>{
      console.log("%c Line:173 🍫 res", "color:#33a5ff", res);
        // this.notices = res.rows.splice(0,4)
        this.games = res.data
     })
   },
  //  taskCount  当前任务
  taskCount(){
     homeApi.taskCount().then(res=>{
      console.log("%c Line:173 🍫 res", "color:#33a5ff", res);
        // this.notices = res.rows.splice(0,4)
        this.jobs = res.data
     })
   },
  }
};
</script>

<style scoped lang="scss">
.app-container{
  min-width: 940px;
}
.update-log{
  margin-bottom: 20px;

}
.clearfix{
  font-weight: 600;
}
</style>

